<template>
  <div class="site-topbar">
    <div class="container">
      <div class="topbar-nav">
        <a rel="nofollow"
           href="">小米商城</a>
        <span class="sep">|</span>
        <a rel="nofollow"
           href=""
           target="_blank">MIUI</a> <span class="sep">|</span> <a rel="nofollow"
           href=""
           target="_blank">IoT</a> <span class="sep">|</span> <a rel="nofollow"
           href=""
           target="_blank">云服务</a> <span class="sep">|</span> <a rel="nofollow"
           href=""
           target="_blank">天星数科</a> <span class="sep">|</span> <a rel="nofollow"
           href=""
           target="_blank">有品</a> <span class="sep">|</span> <a rel="nofollow"
           href=""
           target="_blank">小爱开放平台</a> <span class="sep">|</span> <a rel="nofollow"
           href=""
           target="_blank">企业团购</a> <span class="sep">|</span> <a rel="nofollow"
           href=""
           target="_blank">资质证照</a> <span class="sep">|</span> <a rel="nofollow"
           href=""
           target="_blank">协议规则</a>
        <span class="sep">|</span>
        <a rel="nofollow"
           href=""
           target="_blank"
           id="J_siteDownloadApp"
           class="topbar-download">
          下载app
          <span class="appcode"><img src="//i1.mifile.cn/f/i/17/appdownload/download.png?1"
                 alt="小米商城"
                 width="90"
                 height="90">
            小米商城APP
          </span></a>
        <span class="sep">|</span> <a rel="nofollow"
           href=""
           target="_blank">智能生活</a> <span class="sep">|</span> <a rel="nofollow"
           href="javascript:;"
           class="J_siteGlobalRegion">Select Location</a>
      </div>
      <div id="J_miniCartTrigger"
           class="topbar-cart">
        <a data-spm="navigation.to_cart_navigation_bar.1"
           rel="nofollow"
           id="J_miniCartBtn"
           href="javascript:void(0);"
           @click="
              $router.push({
                name: 'cart',
              })
            "
           class="cart-mini"
           data-params="&quot;&quot;">
<!--          <router-link :to="{name: 'cart'}"></router-link>-->
          <em class="iconfont-cart"></em>
          <em class="iconfont-cart-full hide"></em>
          购物车
          <span class="cart-mini-num J_cartNum">（0）</span>
        </a>
        <div id="J_miniCartMenu"
             class="cart-menu">
          <div class="menu-content">
            <div class="loading">
              <div class="loader"></div>
            </div>
            <ul id="J_miniCartList"
                class="cart-list hide"></ul>
            <div id="J_miniCartListTotal"
                 class="cart-total clearfix hide"></div>
            <div class="msg msg-error hide"></div>
            <div class="msg msg-empty hide">购物车中还没有商品，赶紧选购吧！</div>
          </div>
        </div>
      </div>
      <div id="J_siteUserInfo"
           class="topbar-info"><span class="user">
          <a data-spm="navigation.mycenter_navigation_bar.1"
             rel="nofollow"
             class="user-name"
             href=""
             target="_blank">
            <span class="name">二施兄</span>
            <i class="el-icon-arrow-down"></i>
          </a>
          <div id="J_userMenuWrapper"
               class="user-menu-wrapper">
            <ul class="user-menu">
              <li><a data-spm="navigation.mycenter_list.1"
                   rel="nofollow"
                   href=""
                   target="_blank">个人中心</a></li>
              <li><a data-spm="navigation.shopping_evaluation_list.1"
                   rel="nofollow"
                   href=""
                   target="_blank">评价晒单</a></li>
              <li><a data-spm="navigation.myfavor_list.1"
                   rel="nofollow"
                   href=""
                   target="_blank">我的喜欢</a></li>
              <li><a data-spm="navigation.account_list.1"
                   rel="nofollow"
                   href=""
                   target="_blank">小米账户</a></li>
              <li><a data-spm="navigation.logout_list.1"
                   rel="nofollow"
                   id="J_userLogout"
                   href="">退出登录</a></li>
            </ul>
          </div>
        </span><span class="sep">|</span><span class="message"><a data-spm="navigation.message_navigation_bar.1"
             rel="nofollow"
             href="javascript:void(0);"
             data-href=""
             class="J_needAgreement"
             data-login="true"
             data-agreement="true">消息通知<i class="J_miMessageTotal"></i></a></span>
        <span class="sep">|</span>
        <a data-spm="navigation.to_order_navigation_bar.1"
           rel="nofollow"
           class="link link-order"
           href="javascript:void(0);"
           @click="
              $router.push({
                name: 'order-list',
              })
            ">我的订单</a>
      </div>
    </div>
  </div>
  <div class="site-header">
    <div class="container">
      <div class="header-logo">
        <a href=""
           title="小米官网"
           class="logo ir">小米官网</a>
      </div>
      <div class="header-nav ">
        <ul class="nav-list J_navMainList clearfix">
          <li id="J_navCategory"
              class="nav-category"><a href=""
               class="link-category"><span class="text">全部商品分类</span></a>
          </li>
          <li class="nav-item"><a href="#"
               class="link">小米手机</a></li>
          <li class="nav-item"><a href="#"
               class="link">Redmi 红米</a></li>
          <li class="nav-item"><a href="#"
               class="link">电视</a></li>
          <li class="nav-item"><a href="#"
               class="link">笔记本</a></li>
          <li class="nav-item"><a href="#"
               class="link">平板</a></li>
          <li class="nav-item"><a href="#"
               class="link">家电</a></li>
          <li class="nav-item"><a href="#"
               class="link">路由器</a></li>
          <li class="nav-item"><a href="#"
               class="link">智能硬件</a></li>
          <li class="nav-item"><a href="#"
               class="link">服务</a></li>
          <li class="nav-item"><a href="#"
               class="link">社区</a></li>

        </ul>
      </div>
      <div class="header-search  clearfix">
        <form id="J_searchForm"
              action=""
              method="get"
              class="search-form clearfix">
          <label for="search"
                 class="hide">站内搜索</label>
          <input type="search"
                 id="search"
                 name="keyword"
                 autocomplete="off"
                 class="search-text"
                 placeholder="小米灵感触控笔">
          <el-button type="primary"
                     icon="el-icon-search"
                     class="search-btn"></el-button>
          <div class="search-hot-words"></div>
          <div id="J_keywordList"
               class="keyword-list hide">
            <ul class="result-list"></ul>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'MiHeader',
  methods: {
    backCart () {
      alert('返回购物车')
      this.$router.push({ path: '/Cart' })
    }
  }
})
</script>

<style>
.site-topbar {
  position: relative;
  z-index: 30;
  height: 40px;
  font-size: 12px;
  color: #b0b0b0;
  background: #333;
}
.container {
  width: 1226px;
  margin-right: auto;
  margin-left: auto;
}
.site-topbar .topbar-nav {
  float: left;
  height: 40px;
  line-height: 40px;
}
.site-topbar a {
  color: #b0b0b0;
  line-height: 40px;
  display: inline-block;
}
.site-topbar a:hover {
  color: #fff;
}
.site-topbar .sep {
  margin: 0 0.3em;
  color: #424242;
}
.site-topbar .topbar-download .appcode {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 124px;
  height: 0;
  background: #fff;
  margin-left: -55px;
  -webkit-box-shadow: #aaa 0 1px 5px;
  box-shadow: 0 1px 5px #aaa;
  text-align: center;
  font-size: 14px;
  color: #333;
  line-height: 1;
  overflow: hidden;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
}
.site-topbar .topbar-download:hover .appcode {
  height: 148px;
}
.site-topbar .topbar-download img {
  display: block;
  margin: 18px auto 12px;
}

.site-topbar .topbar-cart {
  position: relative;
  float: right;
  width: 120px;
  height: 40px;
  margin-left: 15px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  font-size: 12px;
}
.site-topbar .cart-mini {
  position: relative;
  z-index: 32;
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #b0b0b0;
  background: #424242;
}

.site-topbar .cart-menu {
  position: absolute;
  right: 0;
  top: 40px;
  z-index: 31;
  width: 316px;
  height: 0;
  color: #424242;
  background: #fff;
  -webkit-box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
  overflow: hidden;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
}
.site-topbar .cart-menu .menu-content {
  padding: 20px 0 0;
}
.site-topbar .topbar-cart:hover .cart-menu {
  height: 100px;
}
.site-topbar .cart-menu .loading,
.site-topbar .cart-menu .msg {
  margin: 0 20px 20px;
  text-align: center;
}

.site-topbar .topbar-info {
  position: relative;
  float: right;
  height: 40px;
  line-height: 40px;
  line-height: 40px;
}
.site-topbar .topbar-info span {
  float: left;
}
.site-topbar .user {
  position: relative;
  width: 110px;
  padding: 0;
  white-space: nowrap;
  text-align: center;
}
.site-topbar .message {
  padding: 0 10px;
}
.site-topbar .topbar-info .link {
  padding: 0 5px;
  text-align: center;
}
.site-topbar .topbar-info .link-order {
  width: 70px;
}
.site-topbar .user-menu-wrapper {
  position: absolute;
  left: 0;
  top: 40px;
  z-index: 3;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
  background: #fff;
  -webkit-box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
}
.site-topbar .user:hover .user-menu-wrapper {
  height: 164px;
}
user agent stylesheet li {
  display: list-item;
  text-align: -webkit-match-parent;
}
.site-topbar .user-menu {
  width: 110px;
  margin: 0;
  padding: 7px 0;
  list-style-type: none;
}
.site-topbar .user-menu a {
  display: block;
  padding: 3px 30px;
  line-height: 2;
  color: #424242;
}
.site-topbar .user:hover {
  background-color: #fff;
}
.site-topbar .user:hover .user-name {
  color: #424242;
}
.site-topbar .user .user-name:hover {
  color: #ff6700;
}
.site-topbar .user-menu a:hover {
  color: #ff6700;
}
.site-header .header-logo {
  float: left;
  width: 62px;
  margin-top: 22px;
}
.logo {
  width: 56px;
  height: 56px;
  background: url(//s02.mifile.cn/assets/static/image/logo-mi2.png) no-repeat;
  background-size: 56px;
  position: relative;
  top: 0;
  left: 0;
}
.ir {
  display: block;
  text-align: left;
  text-indent: -9999em;
  overflow: hidden;
}
.site-header .header-nav {
  float: left;
  width: 850px;
}

.site-header .nav-list {
  position: relative;
  z-index: 10;
  float: left;
  width: 1100px;
  height: 88px;
  margin: 0;
  padding: 12px 0 0 30px;
  list-style-type: none;
  font-size: 16px;
}
.site-header .cart-menu ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
.site-header .nav-category {
  position: relative;
  float: left;
  width: 127px;
  padding-right: 15px;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}
.site-header .nav-category .link-category {
  display: block;
  padding: 26px 0 38px;
  text-align: right;
  color: #333;
}
.site-category {
  display: none;
  position: absolute;
  top: 88px;
  left: -92px;
  z-index: 21;
  width: 234px;
  height: 460px;
  font-size: 14px;
}
.site-category-list {
  height: 418px;
  margin: 0;
  padding: 20px 0;
  list-style-type: none;
  border: 1px solid #ff6700;
  color: #424242;
  background: #fff;
}
.site-category-list {
  height: 418px;
  margin: 0;
  padding: 20px 0;
  list-style-type: none;
  border: 1px solid #ff6700;
  color: #424242;
  background: #fff;
}
.site-header .nav-item {
  float: left;
}
.site-header .nav-item .link {
  display: block;
  padding: 26px 10px 38px;
  *padding: 26px 8px 38px;
  color: #333;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}
.site-header .header-search {
  float: right;
  width: 296px;
  margin-top: 25px;
}
.site-header .search-form {
  position: relative;
  width: 296px;
  height: 50px;
  z-index: 20;
}
.hide {
  display: none !important;
}
.site-header .search-btn {
  right: 0;
  z-index: 2;
  width: 52px;
  height: 50px;
  font-size: 24px;
  line-height: 24px;
  background: #fff;
  color: #616161;
}
.site-header .search-text,
.search-btn {
  position: absolute;
  top: 0;
  border: 1px solid #e0e0e0;
  outline: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.site-header .search-text {
  right: 51px;
  z-index: 1;
  width: 223px;
  height: 48px;
  padding: 0 10px;
  font-size: 14px;
  line-height: 48px;
}
input[type='search'] {
  box-sizing: content-box;
}
.site-header .search-btn .el-icon-search {
  margin-left: -6px;
}
.container:before,
.container:after {
  content: ' ';
  display: table;
}
.container:after {
  clear: both;
}
</style>
